<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<script src="MI/js/jquery-1.11.1.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			button{
				padding: 10px 15px;
				border: none;
			}
			#a1{
				background-color: #ffaa7f;
			}
			#d1{
				width: 400px;
				height: 250px;
				background-color: #ffaa7f;
				text-align: center;
                line-height: 250px;
			}
		</style>
		<script>
			$(function(){
				$("#a1").click(function(){
					$("#a1").css("background-color","#ffaa7f");
					$("#a3").css("background-color","#efefef");
					$("#a2").css("background-color","#efefef");
					var ptext=$("p").text("tab文字内容一");
				});
				$("#a2").click(function(){
					$("#a2").css("background-color","#ffaa7f");
					$("#a1").css("background-color","#efefef");
					$("#a3").css("background-color","#efefef");
					var ptext=$("p").text("tab文字内容二");
				});
	            $("#a3").click(function(){
	            	$("#a3").css("background-color","#ffaa7f");
	            	$("#a1").css("background-color","#efefef");
					$("#a2").css("background-color","#efefef");
	            	var ptext=$("p").text("tab文字内容三");
	            });
			});
		</script>
	</head>
	<body>
		<button id="a1">tab01</button>
		<button id="a2">tab02</button>
		<button id="a3">tad03</button>
		<div id="d1"><p>tab文字内容一</p ></div>
		
	</body>
</html>